<template>
  <div style="padding: 40px">
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="1">全部服务</el-menu-item>
      <el-menu-item index="2">已预约服务</el-menu-item>
      <el-menu-item index="3">已完成服务</el-menu-item>
    </el-menu>

    <el-table v-if="activeIndex === '1'" :data="tableData" border stripe style="width: 100%;" :key="1">
      <el-table-column type="index" label="序号" width="100px" />
      <el-table-column prop="description" label="备注信息" />
      <el-table-column prop="publisherName" label="发布人" />
      <el-table-column prop="status" label="状态">
        <template #default="scope">
          <el-tag v-if="scope.row.status === -1" type="danger">审核中</el-tag>
          <el-tag v-else-if="scope.row.status === -2" type="danger">未通过审核</el-tag>
          <el-tag v-else-if="scope.row.status === 1" type="primary">已预约</el-tag>
          <el-tag v-else-if="scope.row.status === 0" type="success">未预约</el-tag>
          <el-tag v-else-if="scope.row.status === 2" type="info">已完成</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="userName" label="费用">
        <template #default="scope">
          {{ scope.row.price }}-支付豆
        </template>
      </el-table-column>
      <!-- <el-table-column prop="location" label="地址信息" width="300px" >
        <template #default="scope">
          {{ addressFormat(scope.row.addressId)  }}
        </template>
      </el-table-column> -->
      <el-table-column prop="address" label="地址信息" width="300px" />
      <el-table-column label="开始时间">
        <template #default="scope">
          {{ timeFormat(scope.row.appointmentStartTime) }}
        </template>
      </el-table-column>
      <el-table-column label="结束时间">
        <template #default="scope">
          {{ timeFormat(scope.row.appointmentEndTime) }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="200px">
        <template #default="scope">
          <el-button type="primary" @click="handleDelete(scope.row)">预约服务</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-table v-if="activeIndex === '2'" :data="tableData1" border stripe style="width: 100%;" :key="2">
      <el-table-column type="index" label="序号" width="100px" />
      <el-table-column prop="description" label="备注信息" />
      <el-table-column prop="status" label="状态">
        <template #default="scope">
          <el-tag v-if="scope.row.status === -1" type="danger">审核中</el-tag>
          <el-tag v-else-if="scope.row.status === -2" type="danger">未通过审核</el-tag>
          <el-tag v-else-if="scope.row.status === 1" type="primary">已预约</el-tag>
          <el-tag v-else-if="scope.row.status === 0" type="success">未预约</el-tag>
          <el-tag v-else-if="scope.row.status === 2" type="info">已完成</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="publisherName" label="发布人" />
      <el-table-column prop="userName" label="费用">
        <template #default="scope">
          {{ scope.row.price }}-支付豆
        </template>
      </el-table-column>
      <el-table-column prop="finishPicture" label="图片" width="120px" >
        <template #default="scope">
          <el-image :src="scope.row.finishPicture" style="width: 100px; height: 100px;" />
        </template>
      </el-table-column>
      <el-table-column prop="address" label="地址信息" width="300px" />
      <el-table-column label="开始时间">
        <template #default="scope">
          {{ timeFormat(scope.row.appointmentStartTime) }}
        </template>
      </el-table-column>
      <el-table-column label="结束时间">
        <template #default="scope">
          {{ timeFormat(scope.row.appointmentEndTime) }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="250px">
        <template #default="scope">
          <div>

            <el-button type="primary" @click="handleCustomer(scope.row)">联系客户</el-button>
            <el-button type="success" @click="handleImage(scope.row)">上传图片</el-button>

          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-table v-if="activeIndex === '3'" :data="tableData2" border stripe style="width: 100%;" :key="3">
      <el-table-column type="index" label="序号" width="100px" />
      <el-table-column prop="description" label="备注信息" />
      <el-table-column prop="status" label="状态">
        <template #default="scope">
          <el-tag v-if="scope.row.status === -1" type="danger">审核中</el-tag>
          <el-tag v-else-if="scope.row.status === -2" type="danger">未通过审核</el-tag>
          <el-tag v-else-if="scope.row.status === 1" type="primary">已预约</el-tag>
          <el-tag v-else-if="scope.row.status === 0" type="success">未预约</el-tag>
          <el-tag v-else-if="scope.row.status === 2" type="info">已完成</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="publisherName" label="发布人" />
      <el-table-column prop="finishPicture" label="图片" width="120px" >
        <template #default="scope">
          <el-image :src="scope.row.finishPicture" style="width: 100px; height: 100px;" />
        </template>
      </el-table-column>
      <el-table-column prop="userName" label="费用">
        <template #default="scope">
          {{ scope.row.price }}-支付豆
        </template>
      </el-table-column>
      <!-- <el-table-column prop="location" label="地址信息" width="300px" >
        <template #default="scope">
          {{ addressFormat(scope.row.addressId)  }}
        </template>
      </el-table-column> -->
      <el-table-column prop="address" label="地址信息" width="300px" />
      <el-table-column label="开始时间">
        <template #default="scope">
          {{ timeFormat(scope.row.appointmentStartTime) }}
        </template>
      </el-table-column>
      <el-table-column label="结束时间">
        <template #default="scope">
          {{ timeFormat(scope.row.appointmentEndTime) }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="250px">
        <template #default="scope">
          <div>

            <el-button type="primary" @click="handleCustomer(scope.row)">联系客户</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination class="page" @current-change="handleCurrentChange" :current-page.sync="currentPage" background
      :page-size="10" layout="prev, pager, next, jumper" :total="total">
    </el-pagination>
    <el-dialog title="上传图片"  :visible.sync="dialogVisible3" width="30%">

      <el-upload action="#" :file-list="fileList" list-type="picture-card" :limit="1" :on-change="handelChange"
        :data="dataList" :auto-upload="false">
        <i slot="default" class="el-icon-plus"></i>
      </el-upload>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveEdit1">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getAppointmentList, getAppointmentReserve, getAppointmentMyListJian, getAppointmentReserveFinish, updateFinish } from '@/http/appointment.js'
import { getAddressList } from '@/http/address'
import { getUpload } from '@/http/upload.js'
export default {
  data() {
    return {
      form: {
        addressId: null,
        appointmentEndTime: "",
        appointmentStartTime: "",
        description: "",
        price: 1,
        petId: null,
      },
      form1: {
        appointmentId: null,
        reviewComment: null,
        status: null
      },
      form2: {
        appointmentId: null,
        finishPicture: ''
      },
      dialogVisible: false,
      dialogVisible1: false,
      dialogVisible2: false,
      dialogVisible3: false,
      currentPage: 1,
      tableData: [],
      total: 1,
      addressList: [],
      fileList: [],
      tableData1: [],
      tableData2: [],
      activeIndex: '1',
      dataList: {},
    }

  },
  created() {
    this.load()
  },

  methods: {
    saveEdit1() {
      this.dialogVisible3 = false
      
      updateFinish(this.form2).then(res => {
        this.handleSelect("1")
          this.$message({
            message: "上传成功",
            type: "success",
          });
      })
    },
    handleImage(row) {
      this.dialogVisible3 = true
      this.form2.appointmentId = row.appointmentId
    },
    async handelChange(file, fileList) {
      let formData = new FormData()
      console.log(file.raw);

      formData.append("file", file.raw);
      const res = await getUpload(formData)
      if (res !== '') {
        this.$message({
          message: "上传成功",
          type: "success",
        });
      }
      this.form2.finishPicture = res.data
      this.fileList = [{ name: 'food.jpg', url: res.data }]
    },
    addressFormat(id) {
      if (id == null) {
        return '未设置地址'
      }
      const address = this.addressList.find(item => {
        if (item.value === id) {
          return item
        }
      })
      return ''
    },
    timeFormat(time) {
      const date = new Date(time);

      // 获取年、月、日、小时和分钟
      const year = date.getUTCFullYear();
      const month = date.getUTCMonth() + 1; // getUTCMonth() 返回 0-11，所以需要加 1
      const day = date.getUTCDate();
      const hours = date.getUTCHours();
      const minutes = date.getUTCMinutes();

      // 构建格式化的字符串
      return `${year}年${month}月${day}日${hours}点${minutes}分`;
    },
    handleClose() {
      this.form = {
        addressId: null,
        appointmentEndTime: "",
        appointmentStartTime: "",
        description: "",
        price: 1,
        petId: null,
      }
      this.dialogVisible = false
    },
    handleEdit1(row) {
      this.dialogVisible1 = true
      this.form1.appointmentId = row.appointmentId
    },
    async load() {
      const res = await getAppointmentList({
        current: this.currentPage,
      })
      // const res3 = await getAppointmentMyListJian({
      //   current: this.currentPage,
      // })

      this.tableData = res.data.records.map(e => {
        let data = JSON.parse(e.address)
        e.address = `省：${data.province || ''}，市：${data.city || ''}，区：${data.area || ''}，详细地址：${data.detailAddress || ''}，电话：${data.phone || ''}，姓名：${data.name || ''}`
        return e
      })
      // this.tableData1 = res3.data.records.map(e => {
      //   if (!e.address) {
      //     return e
      //   }
      //   let data = JSON.parse(e.address)
      //   e.address = `省：${data.province || ''}，市：${data.city || ''}，区：${data.area || ''}，详细地址：${data.detailAddress || ''}，电话：${data.phone || ''}，姓名：${data.name || ''}`
      //   return e
      // })

      this.total = Number(res.data.total)
    },
    add() {
      this.dialogVisible = true
    },
    // 确认添加
    async save() {
      console.log(this.form1);

      const { code, message } = await getAppointmentReview(this.form1)
      if (code == '0') {
        this.$message({
          type: "success",
          message: "审核成功"
        })
      } else {
        this.$message({
          type: "error",
          message: "审核失败"
        })
      }
      this.dialogVisible1 = false
      this.load()
    },
    // 编辑
    handleEdit(row) {

    },
    // 确认修改
    async saveEdit() {
      const { code, message } = await getAppointment(this.form)
      if (code == '0') {
        this.$message({
          type: "success",
          message: "修改成功"
        })
      } else {
        this.$message({
          type: "error",
          message: "修改失败"
        })
      }
      this.dialogVisible = false
      this.load()
    },
    async handleDelete(row) {
      const { code, message } = await getAppointmentReserve({ appointmentId: row.appointmentId })
      if (code == '0') {
        this.$message({
          type: "success",
          message: "帮助成功"
        })
      } else {
        this.$message({
          type: "error",
          message: message
        })
      }
      this.load()
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.load()

    },
    handleCurrentChange(pageNum) {
      this.currentPage = pageNum
      this.load()
    },
    onDaloag(row) {
      this.form1 = row
      this.dialogVisible2 = true
    },
    handleCustomer(row) {
      console.log(row);

      // 发送方id、 接收方id、 消息内容、 发送方姓名、 接收方姓名
      this.$router.push({
        path: '/chat',
        query: {
          sendId: this.userId,
          redaId: row.publisherId,
          sendName: row.providerName,
          redaName: row.publisherName,
        }
      })
    },
    async handleSelect(key, keyPath) {
      this.activeIndex = key
      console.log(key);
      switch (key) {
        case '1':

          break;
        case '2':
          const res = await getAppointmentMyListJian({
            current: this.currentPage,
            getType: 1
          })
          this.tableData1 = res.data.records.map(e => {
            if (!e.address) {
              return e
            }
            let data = JSON.parse(e.address)
            e.address = `省：${data.province || ''}，市：${data.city || ''}，区：${data.area || ''}，详细地址：${data.detailAddress || ''}，电话：${data.phone || ''}，姓名：${data.name || ''}`
            return e
          })

          break;
        case '3':
          const res1 = await getAppointmentMyListJian({
            current: this.currentPage,
            getType: 2
          })
          this.tableData2 = res1.data.records.map(e => {
            if (!e.address) {
              return e
            }
            let data = JSON.parse(e.address)
            e.address = `省：${data.province || ''}，市：${data.city || ''}，区：${data.area || ''}，详细地址：${data.detailAddress || ''}，电话：${data.phone || ''}，姓名：${data.name || ''}`
            return e
          })

          break;
      }
    }
  },
  computed: {
    ...mapGetters({
      userId: 'user/getUserId',
      userName: 'user/getUserName',

    })
  }

}
</script>

<style scoped>
.el-menu-demo {
  margin-bottom: 20px;
}
</style>